<!-- @format -->

<template>
  <view
    class="comp-badge"
    :class="[
      `comp-badge--${type}`,
      `comp-badge--${size}`,
      { 'comp-badge--dot': dot },
      { 'comp-badge--fixed': fixed },
      { 'comp-badge--hidden': hidden },
      { 'comp-badge--bordered': bordered },
    ]"
  >
    <!-- 徽标内容容器 -->
    <view v-if="$slots.default" class="comp-badge__content">
      <slot></slot>
    </view>

    <!-- 徽标 -->
    <view
      v-if="!hidden"
      class="comp-badge__badge"
      :style="{
        backgroundColor: color,
        color: textColor,
        borderColor: borderColor,
      }"
    >
      <slot name="badge" v-if="$slots.badge"></slot>
      <template v-else>
        <text v-if="!dot && (value || value === 0)" class="comp-badge__value">
          {{ isOverMax ? `${max}+` : value }}
        </text>
      </template>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// 定义徽标属性
interface Props {
  /** 显示的数字 */
  value?: number | string
  /** 最大值，超过最大值会显示 {max}+ */
  max?: number
  /** 是否显示为小红点 */
  dot?: boolean
  /** 是否固定在右上角 */
  fixed?: boolean
  /** 是否隐藏徽标 */
  hidden?: boolean
  /** 徽标类型 */
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
  /** 徽标尺寸 */
  size?: 'small' | 'medium' | 'large'
  /** 自定义徽标颜色 */
  color?: string
  /** 自定义徽标文字颜色 */
  textColor?: string
  /** 是否显示边框 */
  bordered?: boolean
  /** 自定义边框颜色 */
  borderColor?: string
}

// 定义默认属性
const props = withDefaults(defineProps<Props>(), {
  value: '',
  max: 99,
  dot: false,
  fixed: false,
  hidden: false,
  type: 'danger',
  size: 'medium',
  color: '',
  textColor: '',
  bordered: false,
  borderColor: ''
})

// 计算是否超过最大值
const isOverMax = computed(() => {
  if (typeof props.value === 'string') {
    return false
  }
  return typeof props.value === 'number' && props.value > props.max
})
</script>

<style lang="scss">
.comp-badge {
  position: relative;
  display: inline-flex;
  vertical-align: middle;

  &__content {
    position: relative;
    display: inline-flex;
  }

  &__badge {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    white-space: nowrap;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
    z-index: 9;
    transform: translate(50%, -50%);
    font-weight: 500;
  }

  &__value {
    display: block;
    height: 100%;
    line-height: 1;
  }

  // 固定定位
  &--fixed {
    .comp-badge__badge {
      position: absolute;
      top: 0;
      right: 0;
    }
  }

  // 尺寸变体
  &--small {
    .comp-badge__badge {
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      font-size: 10px;
      line-height: 16px;
      border-radius: 8px;
    }

    &.comp-badge--dot {
      .comp-badge__badge {
        width: 8px;
        height: 8px;
        min-width: 8px;
        border-radius: 4px;
      }
    }
  }

  &--medium {
    .comp-badge__badge {
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      font-size: 12px;
      line-height: 20px;
      border-radius: 10px;
    }

    &.comp-badge--dot {
      .comp-badge__badge {
        width: 10px;
        height: 10px;
        min-width: 10px;
        border-radius: 5px;
      }
    }
  }

  &--large {
    .comp-badge__badge {
      min-width: 24px;
      height: 24px;
      padding: 0 8px;
      font-size: 14px;
      line-height: 24px;
      border-radius: 12px;
    }

    &.comp-badge--dot {
      .comp-badge__badge {
        width: 12px;
        height: 12px;
        min-width: 12px;
        border-radius: 6px;
      }
    }
  }

  // 类型变体
  &--primary {
    .comp-badge__badge {
      background-color: #1989fa;
      color: #fff;
    }
  }

  &--success {
    .comp-badge__badge {
      background-color: #07c160;
      color: #fff;
    }
  }

  &--warning {
    .comp-badge__badge {
      background-color: #ff976a;
      color: #fff;
    }
  }

  &--danger {
    .comp-badge__badge {
      background-color: #ee0a24;
      color: #fff;
    }
  }

  &--info {
    .comp-badge__badge {
      background-color: #969799;
      color: #fff;
    }
  }

  // 边框
  &--bordered {
    .comp-badge__badge {
      border: 1px solid #fff;
    }
  }
}
</style>